<template>
  <div>
    <div class="xq-form-wrapper">
      <a-row>
        <a-col :span="12">
          <a-alert
            style="width: 610px;margin-bottom: 24px;"
            show-icon
            type="warning"
            message="若员工工资已生成工资表并完成归档，则工资数据无法删除。"
            closable
          />
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 24px;" type="flex" align="middle" justify="space-between">
        <a-col>
          <a-month-picker
            v-model="time"
            :allow-clear="false"
            placeholder="选择月份"
            style="width: 180px;margin-right:14px;"
            @change="monthChange"
          />
          <a-input-search v-model="attendanceExcelName" allow-clear placeholder="搜索工时导入表" style="width: 180px;" @search="onSearch" />
        </a-col>
        <a-col>
          <!-- <a-button type="primary" style="margin-right:18px;">
            导出报表
          </a-button> -->
          <a-button type="primary" :disabled="!time" @click="onJump">
            导入考勤数据
          </a-button>
        </a-col>
      </a-row>
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <a-table
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          class="xq-form-content-table"
          :rowClassName="rowClass"
        >
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <div v-if="col.dataIndex === 'name'" :key="index">
              <div class="t-name">
                <div class="overflows">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ record.fileName }}</span>
                    </template>
                    <div class="overflows">
                      {{ record.fileName }}
                    </div>
                  </a-tooltip>
                </div>
              </div>
            </div>
            <div v-if="col.dataIndex === 'legalPerson'" :key="index">
              <div class="t-num">
                <p>员工人数</p>
                <div class="t-num-n">{{ record.empCount }} <span>人</span></div>
              </div>
              <div class="t-time">
                <p>导入时间</p>
                <div class="t-time-n">
                  {{ moment(record.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}
                </div>
              </div>
            </div>
            <div v-if="col.dataIndex === 'tableAction'" :key="index">
              <div class="t-action">
                <a @click="onMsg(record)" style="margin-right:30px;">查看详情</a>
                <a-popconfirm
                  :title="`确认要删除吗？`"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="onDel(record.id)"
                  :disabled="record.isHandle"
                >
                  <a :disabled="record.isHandle">删除</a>
                </a-popconfirm>
              </div>
            </div>
          </template>
        </a-table>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { getPageList, delAttendanceDataRecords } from "./api";
import moment from "moment";

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "员工",
    dataIndex: "legalPerson",
    scopedSlots: { customRender: "legalPerson" }
  },
  {
    title: "Action",
    dataIndex: "tableAction",
    scopedSlots: { customRender: "tableAction" },
    align: "center"
  }
];
export default {
  data() {
    return {
      columns,
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      time: moment().format("YYYY-MM"),
      year: "",
      month: "",
      attendanceExcelName: ""
    };
  },
  created() {
    this.year = moment().format("YYYY");
    this.month = moment().format("MM");
    this.onGetPageList();
  },
  methods: {
    moment,
    rowClass: () => "rowClassNameWK",
    async onGetPageList() {
      try {
        this.spinning = true;
        const { data } = await getPageList({
          companyId: this.$store.state.hr.companyId,
          year: this.year,
          month: this.month,
          attendanceExcelName: this.attendanceExcelName,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetPageList();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetPageList();
    },
    async onDel(e) {
      try {
        await delAttendanceDataRecords(e);
        if (this.tableData.length === 1) {
          this.pageNo > 1 ? (this.pageNo = this.pageNo - 1) : (this.pageNo = 1);
        }
        this.$notification.success({ message: "操作成功" });
        this.onGetPageList();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    monthChange(date, dateString) {
      if (dateString) {
        this.year = moment(dateString).format("YYYY");
        this.month = moment(dateString).format("MM");
        this.time = moment(dateString).format("YYYY-MM");
      } else {
        this.year = "";
        this.month = "";
        this.time = moment().format("YYYY-MM");
      }

      this.onSearch();
    },
    onSearch() {
      this.pageNo = 1;
      this.onGetPageList();
    },
    onMsg(e) {
      this.$router.push({
        name: "checkCard/workingHours/msg",
        query: { recordId: e.id }
      });
    },
    onJump() {
      this.$router.push({
        name: "checkCard/imports",
        query: { time: this.time }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .ant-table-thead {
  display: none;
}
::v-deep .rowClassNameWK {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-bottom: 14px;
  height: 100px;
  display: flex;
  width: calc(100vw - 308px);
  td {
    border: 0 !important;
    &:nth-child(1) {
      width: 20%;
      padding: 0;
    }
    &:nth-child(2) {
      width: 60%;
      padding: 0;
    }
    &:nth-child(3) {
      width: 20%;
      padding: 0;
    }
  }
}
.t-name {
  width: 100%;
  height: 36px;
  line-height: 36px;
  border-right: 1px solid #e8e8e8;
  margin-top: 32px;
  font-size: 18px;
  font-weight: 500;
  padding-left: 44px;
}
.t-action {
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-left: 1px solid #e8e8e8;
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.t-num {
  width: 260px;
  height: 100%;
  float: left;
  padding-left: 60px;
  p {
    margin: 24px 0 14px 0;
    color: #767885;
  }
  .t-num-n {
    color: #55565d;
    font-size: 24px;
    font-weight: 500;
    line-height: 18px;
    span {
      font-size: 14px;
    }
  }
}
.t-time {
  float: left;
  p {
    margin: 24px 0 14px 0;
    color: #767885;
  }
  .t-time-n {
    color: #55565d;
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
  }
}
.overflows {
  max-width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
